<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端路由机制实现</title>
</head>

<body>
    <nav class="nav-box">
        <a href="#/">首页</a>
        <a href="#/product">产品中心</a>
        <a href="#/personal">个人中心</a>
    </nav>
    <div class="view-box"></div>

    <!-- IMPORT JS -->
    <script>
        /*
        HASH路由 
          + 改变页面的哈希值（#/xxx），主页面是不会刷新的
          + 根据不同的哈希值，让容器中渲染不同的内容「组件」
        */
        // 获取渲染内容的容器
        const viewBox = document.querySelector('.view-box');
        // 构建一个路由匹配表：每当我们重新加载页面、或者路由切换（切换哈希值），都先到这个路由表中进行匹配；根据当前页面的哈希值，匹配出要渲染的内容(组件)！！
        const routes = [{
            path: '/',
            component: '首页的内容'
        }, {
            path: '/product',
            component: '产品中心的内容'
        }, {
            path: '/personal',
            component: '个人中心的内容'
        }];

        // 路由匹配的办法
        const routerMatch = function routerMatch() {
            let hash = location.hash.substring(1),
                text = "";
            routes.forEach(item => {
                if (item.path === hash) {
                    text = item.component;
                }
            });
            viewBox.innerHTML = text;
        };

        // 一进来要展示的是首页的信息，所以默认改变一下HASH值
        location.hash = '/';
        routerMatch();

        // 监测HASH值的变化，重新进行路由匹配
        window.onhashchange = routerMatch;
    </script>
</body>

</html>